<!--
 * @Author: 谢陈洁
 * @Date: 2025-05-26 09:23:53
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 16:21:52
 * @Description: file content
-->
<template>
  <div class="page">
    <el-card class="table-card">
      <div class="action-box">
        <add-button v-permission="'menu:add'" @click="handleEdit()">添加菜单</add-button>
      </div>
      <ProTable :columns="columns" :data="dataList" :loading="loading">
        <template #action="{ row }">
          <edit-button size="small" v-permission="'menu:edit'" @click="handleEdit(row)">
            编辑
          </edit-button>
          <del-button size="small" v-permission="'menu:delete'" @click="handleDelete(row)">
            删除
          </del-button>
        </template>
      </ProTable>
    </el-card>
    <base-dialog
      v-model="editVisible"
      title="编辑菜单"
      :loading="submitLoading"
      @cancel="editVisible = false"
      width="700"
      @ok="handleConfirm"
    >
      <DynamicForm
        ref="dynamicFormRef"
        :form-config="dynamicFormConfig"
        v-model="formData"
        @submit-success="handleFormSubmitSuccess"
        label-width="120px"
      />
    </base-dialog>
  </div>
</template>
<script setup lang="ts">
  import { getRoutes, saveRoute, deleteRoute } from '@/services/apis/system/route'
  // import { buildTree } from '@/utils/transform'
  import { columns, formItems } from './config'
  import { ElMessageBox } from 'element-plus'

  const dataList = ref([]) // 数据列表
  const loading = ref(false) // 加载状态
  const currentRow = ref(null) // 当前选中行
  const editVisible = ref(false) // 编辑弹窗可见性
  const dynamicFormRef = ref() // 动态表单组件引用
  const dynamicFormConfig = ref([...formItems]) // 动态表单配置
  const formData = ref({
    type: 1,
    status: 1
  }) // 表单数据
  const submitLoading = ref(false) // 提交加载状态
  const handleEdit = (row: any = { type: 1, status: 1, parent_id: formData.value.parent_id }) => {
    currentRow.value = row
    formData.value = { ...currentRow.value }
    editVisible.value = true
  }

  const handleConfirm = async () => {
    try {
      submitLoading.value = true
      await dynamicFormRef.value?.handleSubmit()
    } catch (error) {
      ElMessage.error('提交失败')
    } finally {
      submitLoading.value = false
    }
  }
  // 获取数据源
  const fetchData = async () => {
    loading.value = true
    const { list } = await getRoutes()
    // const treeList = buildTree(list) // 将平铺数据转换为树形结构
    const treeList = list // 将平铺数据转换为树形结构
    // console.log(treeList)
    if (treeList.length > 0) {
      const target = dynamicFormConfig.value.find((item: any) => item.prop === 'parent_id')
      if (target) {
        target.attrs.data[0].children = [...treeList]
      }
    }
    loading.value = false
    dataList.value = treeList
  }

  const handleFormSubmitSuccess = async (data: FormData) => {
    try {
      await saveRoute(data)
      ElMessage.success('提交成功')
      editVisible.value = false
      fetchData() // 重新获取数据
    } catch (error) {
      ElMessage.error('提交失败')
    }
  }
  const handleDelete = async (row: any) => {
    try {
      await ElMessageBox.confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 调用删除接口
      await deleteRoute(row.id)
      ElMessage.success('删除成功')
      fetchData() // 重新获取数据
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }

  onMounted(() => {
    fetchData()
  })
</script>
<style lang="scss" scoped></style>
